<script setup lang="ts">
import { toRef } from "vue";
import { useThemeStore } from "@/stores/modules/theme";

// 主题
const useTheme = toRef(useThemeStore(), "theme");
</script>

<template>
  <div class="scene-container">
    <div class="scene-operation">
      <span class="opera-item" title="场景描述">
        <Icon class="desc-svg">
          <template #component>
            <svg
              t="1669445941224"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="17815"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="200"
              height="200"
            >
              <path
                d="M879.1 297.8L511.3 479.3 143.5 297.8c-20.2-10.7-18.9-36.1 1.3-45.4l339.6-148.2c16.6-8 35.9-8 52.5 0L876.4 251c23 10.7 23 36.1 2.7 46.8zM437.2 921.2L126 753c-18.8-9.3-29.6-25.4-29.6-44V371.2c0-20 25.6-32.1 44.5-21.4l346 174.8v377.2c1.2 18.7-26.1 34-49.7 19.4z m149.6 0L898.1 753c17.5-9.3 28.3-25.4 28.3-44V371.2c0-20-25.6-32.1-44.5-21.4L533.1 524.4v377.1c0 20 28.1 36.5 53.6 19.7h0.1z"
                p-id="17816"
              ></path>
            </svg>
          </template>
        </Icon>
      </span>
      <span class="opera-item" title="场景图">
        <Icon class="scene-svg">
          <template #component>
            <svg
              t="1669446099683"
              class="icon"
              viewBox="0 0 1129 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="21951"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="200"
              height="200"
            >
              <path
                d="M570.615172 891.586207a17.655172 17.655172 0 0 1-8.827586-2.295173L233.048276 699.497931a17.655172 17.655172 0 0 1-8.827586-15.36v-379.586207a17.655172 17.655172 0 0 1 8.827586-15.36L561.787586 99.398621a17.655172 17.655172 0 0 1 17.655173 0l328.73931 189.793103a17.655172 17.655172 0 0 1 8.827586 15.36v379.586207a17.655172 17.655172 0 0 1-8.827586 15.36L579.442759 889.291034a17.655172 17.655172 0 0 1-8.827587 2.295173zM259.531034 673.897931l311.084138 179.729655 311.084138-179.729655V314.791724L570.615172 135.062069 259.531034 314.791724z"
                p-id="21952"
              ></path>
              <path
                d="M570.615172 673.015172a19.244138 19.244138 0 0 1-8.827586-2.295172l-139.475862-80.507586a17.655172 17.655172 0 0 1-8.827586-15.36v-161.015173a17.655172 17.655172 0 0 1 8.827586-15.36l139.475862-80.684138a17.655172 17.655172 0 0 1 17.655173 0l139.475862 80.507587a17.655172 17.655172 0 0 1 8.827586 15.36v161.015172a17.655172 17.655172 0 0 1-8.827586 15.36L579.442759 670.896552a19.244138 19.244138 0 0 1-8.827587 2.11862zM448.794483 564.965517l121.820689 70.62069 121.82069-70.62069v-141.241379l-121.82069-70.62069-121.820689 70.62069z"
                p-id="21953"
              ></path>
              <path
                d="M710.091034 431.492414a17.655172 17.655172 0 0 1-8.827586-33.015173l189.263449-109.285517a17.655172 17.655172 0 0 1 17.655172 30.72l-189.263448 109.285517a17.655172 17.655172 0 0 1-8.827587 2.295173zM431.13931 431.492414a17.655172 17.655172 0 0 1-8.827586-2.295173L233.048276 319.911724a17.655172 17.655172 0 0 1 17.655172-30.72l189.263449 109.285517a17.655172 17.655172 0 0 1-8.827587 33.015173zM431.13931 592.507586a17.655172 17.655172 0 0 1-14.124138-7.23862 17.655172 17.655172 0 0 1 3.707587-24.717242l139.475862-102.929655a17.655172 17.655172 0 0 1 24.540689 3.707586 17.655172 17.655172 0 0 1-3.531034 24.717242L441.37931 588.976552a17.655172 17.655172 0 0 1-10.24 3.531034zM570.615172 891.586207a17.655172 17.655172 0 0 1-17.655172-17.655173V655.36a17.655172 17.655172 0 0 1 35.310345 0V873.931034a17.655172 17.655172 0 0 1-17.655173 17.655173z"
                p-id="21954"
              ></path>
              <path
                d="M710.091034 592.507586a17.655172 17.655172 0 0 1-10.593103-3.531034l-139.29931-102.929655a17.655172 17.655172 0 0 1-7.238621-14.30069v-138.416552a17.655172 17.655172 0 0 1 35.310345 0v129.588966l132.237241 97.633103a17.655172 17.655172 0 0 1 3.707586 24.717242 17.655172 17.655172 0 0 1-14.124138 7.23862z"
                p-id="21955"
              ></path>
            </svg>
          </template>
        </Icon>
      </span>
      <slot name="opera"></slot>
    </div>
    <slot :theme="useTheme"></slot>
  </div>
</template>

<style lang="less" scoped>
.scene-container {
  width: 100%;
  height: 100%;
  position: relative;
  .scene-operation {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 1000;
    .opera-item {
      color: #42d392;
      cursor: pointer;
      transition: color 0.3s;
      &:hover {
        color: #6088f3;
      }
      &:not(:last-child) {
        margin-right: 10px;
      }
      :deep(.anticon) {
        svg {
          fill: currentColor;
        }
        &.desc-svg {
          > svg {
            width: 20px;
            height: 20px;
          }
        }
        &.scene-svg {
          > svg {
            width: 25px;
            height: 25px;
          }
        }
      }
    }
  }
}
</style>
